<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--头部固定引用-->
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <!--固定引用结束,自定义引用添加在下面-->
    <title>意见反馈</title>
    <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
    <style>


        /*************菜单选择器**开始**************/

        .search-inside-warp .search-inside-column {
            height: 0.4rem;
            white-space: nowrap;
            width: 100%;
        }

        .search-inside-warp .search-inside-column .search-inside-item {
            height: 0.72rem;
            line-height: 0.72rem;
            margin: 0 0.32rem;
            color: rgba(34, 34, 34, 0.45)
        }

        .search-inside-warp .search-inside-column .search-inside-item .search-inside-underline {
            width: 100%;
            bottom: .04rem;
        }

        .search-inside-warp .search-inside-column .search-inside-item .search-inside-underline span {
            width: .36rem;
            background: rgba(44, 104, 255, 1);
            border-radius: .04rem;
        }

        .search-inside-warp .search-inside-column .search-inside-item .search-inside-underline .underactive {
            height: 2px;
            width: 88px;
        }

        .search-inside-warp .search-inside-column .active {
            color: rgba(44, 104, 255, 1);
        }

        .search-inside-warp .inside-inside-traneara {
            width: .4rem;
            height: .88rem;
            right: 1.08rem;
            background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
        }


        .search-inside-warp .inside-inside-lefteara {
            width: .4rem;
            height: .88rem;
            left: 0;
            z-index: 11;
            background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
        }

        .search-inside-warp .column-img {
            width: .64rem;
            height: 0.72rem;
            /*margin-top: 0.14rem;*/
            margin-left: 0.44rem;
        }

        .search-inside-warp .column-img span {
            margin-left: 0;
        }

        /*************菜单选择器**结束**************/

        .feedback-sumit-style {
            width: 6.86rem;
            height: 0.84rem;
            background: rgba(78, 126, 244, 1);
            border-radius: 0.04rem;
            font-size: 0.32rem;
            margin: 0.52rem 0.32rem;
            color: rgba(255, 255, 255, 1);
            padding: 0 3rem 0 3rem;
        }

        .feedback-title-font {
            font-size: 0.32rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(34, 34, 34, 1);
        }

        .feedback-bar-rule {
            padding: 0 0.26rem;
            margin: 0.32rem;
            font-size: 0.26rem;
            color: rgba(34, 34, 34, 0.45);
            border: 0.02rem solid;
            border-radius: 0.04rem;
            line-height: 0.6rem;
            height: 0.6rem;
        }

        .feedback-input-font {
            width: 100%;
            border: none;
            height: 4.56rem;
            padding-left: 0.34rem;
            padding-right: 0.34rem;
            font-size: 0.28rem;
            color: rgba(34, 34, 34, 1);
            line-height: 0.42rem;
        }

        /*去除textrea选中之后的样式*/
        .feedback-input-font textarea {
            border: solid 0rem;
            outline: none;
            padding: 0rem;
        }

        .feedback-bar-bgcolor {
            background: rgba(78, 126, 244, 1);
            color: rgba(255, 255, 255, 1);
            border: 0.02rem solid rgba(78, 126, 244, 1);;
        }

        /*以后添加图片反馈用*/
        .feedback-img-size {
            height: 1.2rem;
            width: 1.2rem;
            margin: 0.32rem 0.2rem 0.36rem 0.32rem;
            background: rgba(247, 247, 247, 1);
            padding: 0.44rem;
        }

        /*以后添加图片反馈用*/
        .feedback-img-add {
            position: relative;
            color: #8D8D8D;
        }

        /*设置输入区域不可拉伸*/
        textarea {
            resize: none;
        }

        /*以后添加图片反馈用*/
        .feedback-img-delete {
            color: #ff0000;
        }


    </style>
</head>
<body>

<!--定义整个页面格局-->
<div class="flex-column h-100-p ff400">

    <!-- 导航栏&标题栏 -->
    <div class="placeholder-top">
        <!--状态栏-->
        <div class="bg-main status-bar"></div>
        <!--导航栏-->
        <div class="bg-main nav-bar flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fspx14"></span>
            </div>
            <div class="center-bar  ff500 line1 feedback-title-font">问题/意见反馈</div>
            <div class="right-bar">
            </div>
        </div>
    </div>

    <div class="flex-1 scroll-y mt8">

        <!--    反馈区域-->
        <div class="flex-column  bg-white ">

            <!--    问题/意见分类     -->
            <div class="flex-row ">
                <div class="feedback-bar-rule align-items-center center-bar " onclick="barClick(1)">
                    问题反馈
                </div>
                <div class="feedback-bar-rule align-items-center center-bar" onclick="barClick(2)">
                    意见反馈
                </div>
                <div class="feedback-bar-rule align-items-center center-bar" onclick="barClick(3)">
                    其他
                </div>
            </div>

            <!--       意见反馈内容-->
            <div class="feedback-input-font">
                <textarea class="feedback-input-font" placeholder="请输入您要反馈的内容"></textarea>
            </div>

            <!--以后添加图片反馈用-->
            <!--       图片上传-->
            <!--        <div class="flex-row flex-wrap">-->
            <!--            <div class="feedback-img-size" onclick="clickImg()">-->
            <!--                <span class="iconfont iconshanchu feedback-img-delete"></span>-->
            <!--                <span class="iconfont iconguanzhu feedback-img-add"></span>-->
            <!--            </div>-->
            <!--        </div>-->
        </div>

        <!--    剩余区域-->
        <!--提交框区域-->
        <div class="feedback-sumit-style center-bar" onclick="submitFeedback()">提交</div>
    </div>

</div>
</body>
<!--下面四个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/icon-font.js"></script>
<script src="../../js/api.js"></script>

<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>

    //用于存储当前意见反馈内容
    let feedbackType = '1'

    //防抖控制
    let flag = true

    //用于存储图片url的数组
    let imgs = []

    //用于存储最终图片url
    let url

    //切换标签
    function barClick(index) {
      //切换底色
      $('.feedback-bar-rule').removeClass('feedback-bar-bgcolor')
      $('.feedback-bar-rule').eq(index - 1).addClass('feedback-bar-bgcolor')

      //赋值当前选择的反馈类型
      feedbackType = index
    }

    function addEvent() {
      //切换事件初始化
      $('.feedback-bar-rule').each(function (i, n) {
        $(n).click(function () {
          $('.feedback-bar-rule').removeClass('active')
          $(n).addClass('active')
        })
      })
    }


    //点击图片区域
    // function clickImg() {
    //   let num = $('.feedback-img-size').length
    //   if (num >= 5) {//个数超过五个允许添加了
    //     console.log('个数超过五个了')
    //   }
    // }

    //拼接url
    function getUrl(data) {
      data.foreach(item => {
        url += item
      })
    }

    function submitFeedback() {
      //获取输入框内容
      let inputText = $('.feedback-input-font').eq(1).val()

      //判断输入框内容是否为空
      if (inputText.replace(/\+/g, '').replace(/[ ]/g, '').replace(/[\r\n]/g, '') < 1) {
        jsBridge.callBridge('toast', {msg: '反馈内容不可为空'})
        return
      } else if (inputText.length > 300) {
        jsBridge.callBridge('toast', {msg: '反馈内容不可超过300个字'})
        return
      } else if (Utils.emojiJudge(inputText)){
        // 不允许输入表情
        jsBridge.callBridge('toast', {msg: '请勿输入表情'})
        return
      } {
        //图片地址为url

        //意见反馈类型feedbackType
        if (flag) {
          flag = false

          Server.feedback.addFeedback({
            msgConnect: inputText,
            messageType: feedbackType
          }).then(function (data) {
            if (data.code === 0) {
              $('.feedback-input-font').eq(1).val('')

              //跳转
              goFeedbackSchedule()
            } else {
              flag = true
              jsBridge.log('网络故障,反馈失败')
            }
          }).catch(function () {
            flag = true
          })
        }
      }
    }

    function goFeedbackSchedule() {
      jsBridge.openWindow('html/user/feedback-schedule.html', {}, {noBar: false})
    }

    /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
    function initPage(params) {
      //状态栏自适应
      Utils.sbhAdaptive()
      $('.feedback-bar-rule').eq(0).addClass('feedback-bar-bgcolor')
    }

    /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
    function startPage(params) {

    }

</script>
</html>
